<template>
	<view class="font-24 flex flex-ai-c flex-jc-sa title">
		<view>附近基地</view>
		<view style="border-right: 1rpx solid #999999;border-left: 1rpx solid #999999;padding: 0 48rpx;">
			<view><text style="color: #999999;">入住</text> {{`${inits.calendarData.start.month}月${inits.calendarData.start.day}日`}}</view>
			<view><text style="color: #999999;">退房</text> {{`${inits.calendarData.end.month}月${inits.calendarData.end.day}日`}}</view>
		</view>
		<view>
			<view>1间房</view>
			<view>1位成人</view>
		</view>
	</view>
	<view style="padding: 0 30rpx;">
		<hotelList :list="inits.list" />
		<u-loadmore bg-color="none" :status="inits.loadStatus" @loadmore="loadmore"
			v-if="inits.list.length"></u-loadmore>
	</view>
</template>

<script lang="ts" setup>
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		reactive
	} from 'vue'
	import { useStore } from 'vuex'
	import hotelList from '@/components/hotelList.vue'
	import hotel from '../../api/hotel.js';
	const store = useStore()
	const inits = reactive({
		list: [],
		calendarData: {
			start: {
				date: '',
				month: '00',
				day: '00',
				weekText: ''
			},
			end: {
				date: '',
				month: '00',
				day: '00',
				weekText: ''
			},
			diff: 1,
			city: '成都',
			text: ''
		},
		page: 1,
		loadStatus: ''
	})
	const getHotelList = async () => {
		let addr = uni.getStorageSync('address')
		const res = await hotel.getHotelList({
			page: inits.page,
			size: 10,
			city: inits.calendarData.city,
			keyword: inits.calendarData.text,
			s_time: inits.calendarData.start.date,
			e_time: inits.calendarData.end.date,
			lat: uni.getStorageSync('address').lat,
			lng: uni.getStorageSync('address').lng
		})
		inits.list = [...inits.list, ...res.data]
		if (res.data.length < 10) return moreStatus('nomore')
		if (res.data.total <= 10) {
			moreStatus('nomore')
		} else {
			moreStatus(res.data.length !== 0 ? 'loadmore' : 'nomore')
		}
		if (res.data.length === 0) return false
		inits.page += 1 // 当前页加1
	}
	const moreStatus = (status : string) => {
		inits.loadStatus = status
	}
	const loadmore = () => {
		if (inits.loadStatus == 'nomore') return
		getHotelList()
	}
	onLoad(() => {
		if (store.state.calendarData) inits.calendarData = store.state.calendarData
		getHotelList()
	})
</script>

<style lang="scss" scoped>
	.title {
		height: 100rpx;
		background: rgba(0, 153, 67, 0.07);
		border-radius: 10rpx;
		color: #009943;
		margin: 30rpx 36rpx;
	}
</style>